<template>
  <div>
    <!-- 面包屑区域-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 添加分类按钮 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
        </el-col>
      </el-row>

      <!-- 树型表格 -->
      <tree-table
      class="dt"
                :data="cateList"
                :columns="columns"
                :selection-type="false"
                :expand-type="false"
                show-index
                index-text="#"
                :border="true"
                :show-row-hover="false"
            >
            <!-- 是否有效模板列 -->
                <template slot-scope="scope" slot="isOk">
                    <i
                        class="el-icon-success"
                        style="color: lightskyblue"
                        v-if="scope.row.cat_deleted == 0"
                    ></i>
                    <i class="el-icon-error" style="color: red" v-if="scope.row.cat_deleted == 1"></i>
                </template>
                <!-- 等级排序模板列 -->
                <template slot-scope="scope" slot="sort">
                    <el-tag type="success" v-if="scope.row.cat_level == 0">一级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level == 1">二级</el-tag>
                    <el-tag type="danger" v-if="scope.row.cat_level == 2">三级</el-tag>
                </template>
                <!-- 操作模板列 -->
                <template slot-scope="scope" slot="opt">
                    <el-button size="mini" type="primary">
                        <i class="el-icon-edit">编辑</i>
                    </el-button>
                    <el-button size="mini" type="danger" >
                        <i class="el-icon-delete">删除</i>
                    </el-button>
                </template>
            </tree-table>
      <!-- 分页 -->
      <!-- 
        current-page :当前渲染的页码值
        page-size ：当前渲染的页码大小
       -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      
      :current-page="this.queryInfo.pagenum"
      :page-sizes="[1, 5, 10,15]"
      :page-size="this.queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>
    </el-card>

    <!-- 对话框 -->
    <!-- 添加分类的对话框 -->
    <el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%"
  @close="addCateDialogClose"
  >
  <!-- 对话框内容 ——表单 -->
  <el-form :model="addCateForm"  ref="addCateFormRef" label-width="100px" :rules="addCateFormRules" >

  <el-form-item label="分类名称"  prop="cat_name" >
    <el-input v-model="addCateForm.cat_name" ></el-input>
  </el-form-item>
  <el-form-item label="父级分类" >
    <!-- 级联选择器 -->
    <el-cascader
    v-model="selectKeys"
    :options="parentcategories"
    :props="cascaderprops"
    @change="parentcateChange"></el-cascader>
  </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>

export default {
  name: "Cate",
  data() {
    return {
      // 表格数据
      cateList: [],

      // 分页数据
      total: 0,

      // 请求参数
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
       //columns(设置表格中列配置信息)
       columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name'
                },
                // 模板列
                {
                    label: '是否有效',
                    type: 'template',
                    template: 'isOk'
                },
                {
                    label: '排序',
                    type: 'template',
                    template: 'sort'
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'opt'
                },
            ],
      // 添加分类对话框显示
      addCateDialogVisible:false,
      // 添加分类表单数据
      addCateForm:{
        cat_name:'',
        // 默认是一级分类
        cat_pid:0,
        cat_level:0
      },
      addCateFormRules:{
        cat_name:[{required: true, message:'请输入分类名称', trigger: 'blur'}]
      },
      // 父级分类数据列表
      parentcategories:[],
      // 级联选择器选中的分类id 数组
      selectKeys:[],
      cascaderprops:{
        expandTrigger: 'hover',
       value:'cat_id',
        label:'cat_name',
        children:'children' 
      },
      

     
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    // 获取分类数据
    async getCateList() {
      const { data: res } = await this.$axios.get("categories", {
        params: this.queryInfo,
      });
     
      // 获取失败
      if(res.meta.status!==200){
        this.$message.error('获取数据失败！')
      }
      // 获取成功
      this.cateList = res.data.result;
      this.total = res.data.total;
    },
    // 监听pagesize 的变化
    handleSizeChange(newPageSize){
      this.queryInfo.pagesize=newPageSize
      this.getCateList()
    },
    handleCurrentChange(newPageNum){
      this.queryInfo.pagenum=newPageNum
      this.getCateList()
    },
    // 点击添加分类按钮显示对话框
    showAddCateDialog(){
      this.addCateDialogVisible=true
      this.getParentcategories()
    },
     //获取父级分类的数据列表
    async getParentcategories(){
     const{data:res} = await this.$axios.get('categories',{params:{type:2}})
     if(res.meta.status!==200){
      this.$message.error('获取数据失败！')
     }
     this.parentcategories=res.data
    //  console.log(this.parentcategories);
     },
    //  级联选择器的数据发生变化
    parentcateChange(){
      // console.log(this.selectKeys);
      if(this.selectKeys.length>0){
        this.addCateForm.cat_pid=this.selectKeys.length-1
        this.addCateForm.cat_level=this.selectKeys.length
        return
      }else{
        this.addCateForm.cat_pid=0
        this.addCateForm.cat_level=0
      }
    },
    // 点击确认，添加分类
    addCate(){
     this.$refs['addCateFormRef'].validate(async(valid) => {
      if (!valid) return 
      const {data:res}=await this.$axios.post('categories',this.addCateForm)
      if(res.meta.status!==201){
        return this.$message.error('添加分类失败！')
      }
      this.$message.success('添加分类成功！')
      this.getCateList()
      this.addCateDialogVisible=false
     })

    },
    // 监听对话框关闭事件，重置表单数据
    addCateDialogClose(){
      this.$refs.addCateFormRef.resetFields()
      this.selectKeys=[]
      this.addCateForm.cat_level=0
      this.addCateForm.cat_pid=0
    }
    
  },
};
</script>

<style lang="less" scoped>
.dt{
  margin-top: 15px;
}
</style>
